<template>
    <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
        <div class="header">
            <h2>
                <img src="~@/assets/logo.svg" style="height: 32px; margin-top: -5px;" alt="logo"> NFTMgmt          
            </h2>
        </div>
        <div class="container">
            <router-view />
        </div>
        <div class="footer">
            <div class="copyright">
                <p>技术支持 浙大宁波理工学院 计算机与数据工程学院</p>
            </div>
        </div>    
    </div>
</template>

<script>
import { deviceMixin } from '@/store/device-mixin'

export default {
  name: 'UserLayout',
  mixins: [deviceMixin],
  mounted () {
    document.body.classList.add('userLayout')
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang="less" scoped>

  #userLayout.user-layout-wrapper {
    height:110%;
    width:100%;
    background-color:#2455a8;
    .header{
        height:20%;
        background:#2455a8 url(~@/assets/header.svg) no-repeat;
        background-size:100% 100%;
        position:relative;
        h2{
            position:relative;
            margin-left:10%;
            top:45%;
            color:white;            
            font-size:210%;
        }
    }

    .container {
        min-width: 33%;
        min-height: 33%;
        margin-left: 1%;
        margin-right: 1%;
        position: relative;
    }
    .footer {
        position: relative;
        width: 100%;
        height: 14%;
        text-align: center;
        background-color:#2455a8;
        p{
            color:rgb(211, 211, 211);
        }
        .links {
            margin-bottom: 10%;
            font-size: 100%;
            a {
                color: rgba(0, 0, 0, 0.45);
                transition: all 0.3s;
                &:not(:last-child) {
                    margin-right: 40px;
                }
            }
            
        }
        .copyright {
            position:relative;
            margin-top:3%;
            color: #2455a8;
            font-size: 14px;
        }
    }
      

}
</style>
